<template>
    <div id="pageAside">
        <el-aside width="200px">
          <el-menu
            :default-active="currentPage"
            class="el-menu-vertical-demo"
            background-color="#1e5ee2"
            :collapse="isCollapse"
            text-color="#fff">
            <!-- <el-menu-item index="1" class="navLevel1">
              <div class="menu-content" @click="navLevel1Fuc($event)">
                <i class="nav_icon icon-home"></i>
                <span slot="title">首&nbsp;&nbsp;&nbsp;&nbsp;页</span>
                <i class="navLevel1_top"></i>
                <i class="navLevel1_bottom"></i>
              </div>
            </el-menu-item> -->
            <el-menu-item :index="item.menuId" :key="'menu'+item.menuId" class="navLevel1" v-for="item in menus">
              <div class="menu-content" @click="navLevel1Fuc($event, item)">
                <i class="nav_icon" :class="item.menuIcon"></i>
                <span slot="title">{{item.menuName}}</span>
                <i class="nav_arrow" v-if="item.children&&item.children.length>0"></i>
                <i class="navLevel1_top"></i>
                <i class="navLevel1_bottom"></i>
              </div>
              <template slot-scope>
                <ul class="navLevelGroup" v-if="item.children&&item.children.length>0">
                  <li class="navLevel2" :index="menuChild.menuId" @click="navLevel2Fuc($event, menuChild)" :key="'menu'+menuChild.menuId" v-for="menuChild in item.children">{{menuChild.menuName}}</li>
                  <!-- <li class="navLevel2" @click="navLevel2Fuc($event)">方案2</li> -->
                </ul>
              </template>
            </el-menu-item>
            
            <!-- <el-menu-item index="3" class="navLevel1">
              <div class="menu-content" @click="navLevel1Fuc($event)">
                <i class="nav_icon icon-warning"></i>
                <span slot="title">预警中心</span>
                <i class="nav_arrow"></i>
                <i class="navLevel1_top"></i>
                <i class="navLevel1_bottom"></i>
              </div>
              <template slot-scope>
                <ul class="navLevelGroup">
                  <li class="navLevel2" @click="navLevel2Fuc($event)">预警信息</li>
                  <li class="navLevel2" @click="navLevel2Fuc($event)">预警绑定</li>
                </ul>
              </template>
            </el-menu-item>

            <el-menu-item index="4" class="navLevel1">
              <div class="menu-content" @click="navLevel1Fuc($event)">
                <i class="nav_icon icon-collection"></i>
                <span slot="title">我的收藏</span>
                <i class="nav_arrow"></i>
                <i class="navLevel1_top"></i>
                <i class="navLevel1_bottom"></i>
              </div>
              <template slot-scope>
                <ul class="navLevelGroup">
                  <li class="navLevel2" @click="navLevel2Fuc($event)">收藏夹列表</li>
                </ul>
              </template>
            </el-menu-item>
            <el-menu-item index="5" class="navLevel1">
              <div class="menu-content" @click="navLevel1Fuc($event)">
                <i class="nav_icon icon-brief"></i>
                <span slot="title">简报中心</span>
                <i class="nav_arrow"></i>
                <i class="navLevel1_top"></i>
                <i class="navLevel1_bottom"></i>
              </div>
              <template slot-scope>
                <ul class="navLevelGroup">
                  <li class="navLevel2" @click="navLevel2Fuc($event)">简报列表</li>
                  <li class="navLevel2" @click="navLevel2Fuc($event)">素材列表</li>
                  <li class="navLevel2" @click="navLevel2Fuc($event)">生成简报</li>
                </ul>
              </template>
            </el-menu-item>

            <el-menu-item index="6" class="navLevel1">
              <div class="menu-content" @click="navLevel1Fuc($event)">
                <i class="nav_icon icon-report"></i>
                <span slot="title">报告列表</span>
                <i class="nav_arrow"></i>
                <i class="navLevel1_top"></i>
                <i class="navLevel1_bottom"></i>
              </div>
              <template slot-scope>
                <ul class="navLevelGroup">
                  <li class="navLevel2" @click="navLevel2Fuc($event)">报告中心</li>
                  <li class="navLevel2" @click="navLevel2Fuc($event)">素材列表</li>
                  <li class="navLevel2" @click="navLevel2Fuc($event)">生成简报</li>
                </ul>
              </template>
            </el-menu-item>
            <el-menu-item index="7" class="navLevel1">
              <div class="menu-content" @click="navLevel1Fuc($event)">
                <i class="nav_icon icon-search"></i>
                <span slot="title">智能搜索</span>
                <i class="navLevel1_top"></i>
                <i class="navLevel1_bottom"></i>
              </div>
            </el-menu-item> -->

          </el-menu>
        </el-aside>
    </div>
</template>
<script>
import '../assets/css/aside.css'
export default {
    data(){
      return{
        currentPage: '1',
        isCollapse: false,
      }
    },
    methods:{
      navLevel2Fuc(el,item){
        this.$router.push({path: item.path});
        var target = el.target;
        var liArr = target.parentNode.children;
        for (let i = 0; i < liArr.length; i++) {
          liArr[i].setAttribute('class', 'navLevel2');
        }
        target.setAttribute('class', 'navLevel2 active');
      },
      navLevel1Fuc(el, item){
        this.$router.push({path: item.path});
        var target = el.target;
        console.log(target);
        if(target.className !== 'menu-content'){
          target = target.parentNode;
        }
        if(target.parentNode.children.length > 1){ // 说明有子菜单
          var liArr = target.parentNode.lastChild.children;
          for (let i = 0; i < liArr.length; i++) {
            liArr[i].setAttribute('class', 'navLevel2');
          }
        }
      }
    }
}
</script>
<style>

</style>